<!--
访问地址：https://paycloud.vip

-->
<!DOCTYPE html>
<html>

<head>
	<meta charset="UTF-8">
	<title>上海崇明教育</title>

	<link rel="stylesheet" href="css/public.css" />
	<link rel="stylesheet" href="css/fq.css" />
	<script src="js/jquery.min.js"></script>
	<script src="js/echarts.min.js"></script>
	<script type="text/javascript" src="https://api.map.baidu.com/api?v=3.0&ak=kKdujke45DE5elsaLoqIFQDWaVLhFyFU">
	</script>
</head>

<body>
	<div class="background-img" id="mainbody">

		<div class="todayTimeBox">
			<div style="display: inline-block;">
				<div style="display: inline-block;cursor: pointer;">
					<img src="../screenHtml/img/anbj.png" alt=""
						style="width:100px;height: 40px;margin-left:290px;margin-top: 17px;">
					<div
						style="display: inline-block;font-size: 18px;position: absolute;margin-left: -86px;margin-top: 3px;">
						数字基座</div>
				</div>
				<div style="display: inline-block;cursor: pointer;">
					<img src="../screenHtml/img/anbj.png" alt="" style="width:100px;height: 40px;margin-top: 17px;">
					<div
						style="display: inline-block;font-size: 18px;position: absolute;margin-left: -86px;margin-top: 3px;">
						数字基座</div>
				</div>
				<div style="display: inline-block;cursor: pointer;">
					<img src="../screenHtml/img/anbj.png" alt="" style="width:100px;height: 40px;margin-top: 17px;">
					<div
						style="display: inline-block;font-size: 18px;position: absolute;margin-left: -86px;margin-top: 3px;">
						数字基座</div>
				</div>
				<div style="display: inline-block;cursor: pointer;">
					<img src="../screenHtml/img/anbj.png" alt="" style="width:100px;height: 40px;margin-top: 17px;">
					<div
						style="display: inline-block;font-size: 18px;position: absolute;margin-left: -86px;margin-top: 3px;">
						数字基座</div>
				</div>

			</div>
			<div
				style="display: inline-block;font-size: 40px;font-family: Arial, Helvetica, sans-serif;letter-spacing: 8px;margin-top: .25rem;margin-left: 110px;">
				上海崇明教育</div>
			<div style="display: inline-block;">
				<div style="display: inline-block;cursor: pointer;">
					<img src="../screenHtml/img/anbj.png" alt=""
						style="width:100px;height: 40px;margin-top: 17px;margin-left: 110px;">
					<div
						style="display: inline-block;font-size: 18px;position: absolute;margin-left: -86px;margin-top: 3px;">
						数字基座</div>
				</div>
				<div style="display: inline-block;cursor: pointer;">
					<img src="../screenHtml/img/anbj.png" alt="" style="width:100px;height: 40px;margin-top: 17px;">
					<div
						style="display: inline-block;font-size: 18px;position: absolute;margin-left: -86px;margin-top: 3px;">
						数字基座</div>
				</div>
				<div style="display: inline-block;cursor: pointer;">
					<img src="../screenHtml/img/anbj.png" alt="" style="width:100px;height: 40px;margin-top: 17px;">
					<div
						style="display: inline-block;font-size: 18px;position: absolute;margin-left: -86px;margin-top: 3px;">
						数字基座</div>
				</div>
				<div style="display: inline-block;cursor: pointer;">
					<img src="../screenHtml/img/anbj.png" alt="" style="width:100px;height: 40px;margin-top: 17px;">
					<div
						style="display: inline-block;font-size: 18px;position: absolute;margin-left: -86px;margin-top: 3px;">
						数字基座</div>
				</div>

			</div>
			<div class="todayTime" id="todayTime" style="display: inline-block;">
				<!-- <span>2018年6月28日</span>
					<span>晴</span>
					<span>12:30</span> -->
				<script type="text/javascript">
					//现在是 2020年11月24日11：24:01(星期二)，欢迎您的到访
					//创建Date对象
					var date = new Date();
					var box2 = document.getElementById("todayTime");
					//调用函数
					timemove();

					//定义函数
					function timemove() {
						//定义个个时间变量
						var date = new Date();
						var year = date.getFullYear();
						var mth = date.getMonth() + 1;
						var d = date.getDate();
						var h = date.getHours();
						var m = date.getMinutes();
						var s = date.getSeconds();
						var week = date.getDay();
						var weeks = new Array("星期日", "星期一", "星期二", "星期三", "星期四", "星期五", "星期六");

						//定义拼接变量,变量调用转换两位数函数
						var time = year + "年" + fn(mth) + "月" + fn(d) + "日";

						//定义函数，将一位数"1"转为两位数"01"
						function fn(str) {
							str < 10 ? str = "0" + str : str;
							return str;
						}
						//定义定时器，调用函数，每秒刷新
						// setInterval(timemove, 1000);
						//拼接变量显示在页面
						todayTime.innerHTML = time;
					}
				</script>
			</div>
		</div>
		<div class="mainbody" id="">
			<div class="leftContent">
				<div class="serviceItem">
					<div class="serviceSubItem">
						<div style="color:#fff;font-size: 16px;margin-left: 30px;position:absolute;margin-top: 10px;">学校数量(9999)

						</div>
						<div id="left1" style="width:100%;height: 400px;"></div>
					</div>
				</div>

				<script>
					var chartDom = document.getElementById('left1');
					var myChart = echarts.init(chartDom);
					var option;

					option = {
						tooltip: {
							trigger: 'item'
						},
						legend: {

							left: 'left',
							orient: 'vertical',
							left: 20,
							right: 10,
							top: 120,
							bottom: 20,
							textStyle: {
								color: '#fff'
								// ...
							}
						},
						series: [{
							name: '学校数量',
							type: 'pie',
							color: [
								'#37A2DA',
								'#32C5E9',
								'#67E0E3',
								'#9FE6B8',
								'#ff9f7f',
								'#fb7293',
								'#E062AE',
								'#E690D1',
								'#e7bcf3',
								'#9d96f5',
								'#8378EA',
								'#96BFFF'
							],
							radius: ['30%', '50%'],
							avoidLabelOverlap: false,
							itemStyle: {
								borderRadius: 0,
								borderColor: '#fff',
								borderWidth: 2,

							},
							center: ['60%', '35%'],

							label: {
								show: false,
								position: 'center',
								color: '#fff'
							},
							emphasis: {
								label: {
									show: true,
									fontSize: 18,
									fontWeight: 'bold',
									color: '#fff',
									formatter: "{b}{c}"
								}
							},
							labelLine: {
								show: false,
								color: '#fff'
							},
							data: [{
									value: 1048,
									name: '小学'
								},
								{
									value: 735,
									name: '初中'
								},
								{
									value: 580,
									name: '高中'
								},
								{
									value: 484,
									name: '大学'
								},
								{
									value: 300,
									name: '特殊学校'
								}
							]
						}]
					};

					option && myChart.setOption(option);

					handleChartLoop(option,myChart)
					function handleChartLoop(option1, myChart1) {
						var currentIndex = 0
						setInterval(() => {
							var dataLen = option1.series[0].data.length
							currentIndex = (currentIndex + 1) % dataLen
							for (var idx in option1.series[0].data) {
								// 遍历饼图数据，取消所有图形的高亮效果
								myChart1.dispatchAction({
									type: 'downplay',
									seriesIndex: 0,
									dataIndex: idx
								})
								// 高亮当前图形
								myChart1.dispatchAction({
									type: 'highlight',
									seriesIndex: 0,
									dataIndex: currentIndex
								})
							}
						}, 1000)
					}
				</script>


				<style>
					/* 首先样式重置 */
					ul {
						list-style: none;
						padding: 0;
					}

					/* 表格基本样式规范 */
					.table {
						/* width: 800px; */
						margin: 20px auto;
						/* background-color: powderblue; */
					}

					/* 所有单元格浮动*/
					.table .tr>li {
						float: left;
						text-align: center;
					}

					/* 清除浮动带来的影响 */
					.clearfix::after {
						content: '';
						display: block;
						clear: both;
					}

					/* 行--设置行高 */
					.table .thead .tr {
						/* background-color: #008080; */
						color: #fff;
						font-size: 16px;
						height: 35px;
						line-height: 35px;
					}

					.table .tbody .tr {
						/* background-color: #fff; */
						color: #fff;
						font-size: 14px;
						height: 40px;
						/* line-height属性仅适合单行文本，对于多行文本使用span包裹对其盒模型进行调整 */
						line-height: 40px;
					}

					.table .tbody .tr li:last-child>div {
						display: inline-block;
						width: 60px;
						height: 30px;
						/* background-color: #008c8c; */
						color: #fff;
						font-size: 12px;
						line-height: 30px;
						cursor: pointer;
					}

					/* 列--设计列宽 */
					.table .thead li:first-child {
						width: 100px;
					}

					.table .tbody li:first-child {
						width: 100px;
					}

					.table .thead li:nth-child(2) {
						width: 120px;
					}

					.table .tbody li:nth-child(2) {
						width: 120px;
						margin-left: 30px;
					}

					.table .tbody li:nth-child(3) {
						width: 150px;
					}

					.table .thead li:last-child {
						width: 160px;
					}

					.table .tbody li:last-child {
						width: 160px;
					}

					/* 列--设计列宽 */
					.table .tr {
						display: flex;
					}

					.table .thead li:first-child {
						flex: 1;
					}

					.table .tbody li:first-child {
						flex: 1;
					}

					.table .thead li:nth-child(2) {
						flex: 1.5;
					}

					.table .tbody li:nth-child(2) {
						flex: 1.2;
					}


					.table .tbody li:nth-child(3) {
						flex: 1.2;
					}

					.table .tbody li:nth-child(4) {
						flex: 1.2;
					}

					.table .thead li:last-child {
						flex: 1;
					}

					.table .tbody li:last-child {
						flex: 1;
					}
				</style>
				<div class="serviceForm">
					<div class="serviceSubItem">
						<div style="color:#fff;font-size: 20px;margin-left: 30px;">物联数据</div>
						<ul class="table">
							<li class="thead">
								<ul class="tr clearfix">
									<li>班级名称</li>
									<li>人数</li>
									<li>男生比例</li>
									<li>人数占比</li>
								</ul>
							</li>

							<li class="tbody">
								<ul class="tr clearfix">
									<li>崇明一班</li>
									<li>28</li>

									<li>8.3</li>
									<li>12.3%</li>
								</ul>
								<ul class="tr clearfix">
									<li>崇明二班</li>
									<li>56</li>

									<li>12.5</li>
									<li>14%</li>
								</ul>
								<ul class="tr clearfix">
									<li>崇明三班</li>
									<li>89</li>

									<li>20.7</li>
									<li>27.7%</li>
								</ul>
								<ul class="tr clearfix">
									<li>崇明四班</li>
									<li>120</li>

									<li>27.1</li>
									<li>30.0%</li>
								</ul>
								<ul class="tr clearfix">
									<li>崇明五班</li>
									<li>30</li>

									<li>5.0</li>
									<li>8%</li>
								</ul>
							</li>
						</ul>
					</div>
					<!-- <div class="seHeader">
						<span>
							<p class="p-1">服务订单情况</p>
							<p class="p-2">Service order status</p>
						</span>
						<span>\02</span>
					</div>
					<div class="statusList">
						<ul class="seTable">
							<li>时间</li>
							<li>服务对象</li>
							<li>服务类型</li>
							<li>服务组织</li>
							<li>状态</li>
						</ul>
						<div id="orderItems" class="outlineBorder">

						</div>
					</div> -->
				</div>
			</div>
			<div class="centerContent">
				<div style="position: absolute;height: 120px;z-index: 2;top: 5%;width:700px;margin-left: 580px;">
					<div style="display: inline-block;">
						<div style="color:#73abe9;padding-left: 140px;font-size: 24px;">已接入</div>
						<div
							style="position: absolute;color:#73abe9;padding-left: 110px;font-size: 28px;margin-top: 20px;font-weight: bold;">
							20,221,115</div>
						<img src="../screenHtml/img/an-deepblue.png" alt=""
							style="height:70px;width:248px;padding-left: 60px;">
					</div>
					<div style="display: inline-block;">
						<div style="color:yellow;padding-left: 140px;font-size: 24px;">未接入</div>
						<div
							style="position: absolute;color:yellow;padding-left: 110px;font-size: 28px;margin-top: 20px;font-weight: bold;">
							20,221,115</div>
						<img src="../screenHtml/img/an-yellow.png" alt=""
							style="height:70px;width:248px;padding-left: 60px;">
					</div>
				</div>
				<div style="position: absolute;height: 120px;z-index: 2;top: 75%;width:700px;margin-left: 580px;">
					<img src="../screenHtml/img/menu01.png" alt=""
						style="height: 100%;width:120px;padding-left: 60px;cursor: pointer;">
					<img src="../screenHtml/img/menu02.png" alt=""
						style="height: 100%;width:120px;padding-left: 40px;cursor: pointer;">
					<img src="../screenHtml/img/menu03.png" alt=""
						style="height: 100%;width:120px;padding-left: 40px;cursor: pointer;">
					<img src="../screenHtml/img/menu04.png" alt=""
						style="height: 100%;width:120px;padding-left: 40px;cursor: pointer;">
				</div>
				<div class="map_section">
					<div class="map_box" id="mapbox" style="z-index: -9999;"></div>

				</div>


				<style>
					.map_section {
						height: 1080px;
						width: 1920px;

					}

					.map_box {
						width: inherit;
						height: inherit;
					}

					/* 隐藏地图的baidulogo */
					::v-deep .anchorBL {
						display: none;
					}
				</style>
				<script type="text/javascript">
					var allDataList = [{
						longitude: "121.661692",
						latitude: "31.612826",
						dwmc: "崇明区",
						data1: "1124",
						isShow: true,
						isShowTwo: true,
						typeDataVlaue: "1"
					}] // 所有数组

					var maps = null;
					initCreatedBmap();
					initAddMarker();

					function initCreatedBmap(long = "121.661692", lat = "31.612826", zoomIndex = 11) {
						let map = new BMap.Map("mapbox", {
							enableMapClick: false
						});
						let region = "崇明区";
						drawPolygon(region);
						let point = new BMap.Point(long, lat);
						map.centerAndZoom(point, zoomIndex);
						map.enableScrollWheelZoom(true);
						map.setMapStyleV2({
							styleId: "c84c33f37c0f83bf3a4572a40399ab92" // 这个id 需要自己去百度地图中发布
						});
						// 也可以用系统自带的
						// map.setMapStyle({ style: "midnight" });
						maps = map;
					}

					// 绘制行政区划轮廓
					function drawPolygon(regionName) {
						let that = this;
						let bdary = new BMap.Boundary();
						bdary.get(regionName, function (rs) {
							let count = rs.boundaries.length;
							if (!count) {
								console.log("未能获取到当前输入的行政区域");
								return;
							}
							for (let i = 0; i < count; i++) {
								//创建多边形覆盖物
								let ply = new BMap.Polygon(rs.boundaries[i], {
									strokeWeight: 4,
									strokeColor: "#01D6F8",
									fillOpacity: 0.6,
									strokeStyle: "solid"
								});
								ply.setFillColor("#285E89");
								//添加覆盖物
								maps.addOverlay(ply);
							}
						});
					}

					function initAddMarker() {
						let that = this;
						let dataArr = allDataList;
						let bigSize = new BMap.Size(30, 30);
						let icon1 = new BMap.Icon("../img/location.png", bigSize);
						dataArr.map(item => {
							let mapIcon = icon1;
							mapIcon.setImageSize(bigSize); // 背景图 大小
							let point = new window.BMap.Point(item.longitude, item.latitude);
							let labelContent = item.dwmc;
							let num = `${item.data1}`;
							let optsion = {
								point: 0,
								offset: 0,
								enableMassClear: true
							};
							let marker = new window.BMap.Marker(point, {
								icon: icon1
							});
							let label = new window.BMap.Label(item.dwmc[0], optsion);
							// marker.setIcon(mapIcon)
							marker.setLabel(label);
							// 自行加判断
							// if (!item.isShow && !item.isShowTwo) {
							// 休业 撤防
							label.setStyle({
								// 设置label的样式
								width: "30px",
								height: "30px",
								background: item.typeDataVlaue == 1 ? "#fff" : "#fff",
								borderRadius: "50%",
								lineHeight: "22px",
								textAlign: "center",
								fontFamily: "Microsoft YaHei",
								fontWeight: "bold",
								color: "rgba(139, 139, 139, 1)",
								fontSize: "15px",
								borderWidth: "4px",
								borderStyle: "solid",
								borderColor: "rgba(0, 170, 44, 1)"
							});
							maps.addOverlay(marker);
							// 点击跳转页面
							marker.addEventListener("click", async item => {
								let index = allDataList.findIndex(
									item => item.dwmc == labelContent
								);
								allDataList.forEach(item => {
									if (item.dwmc == labelContent) {
										this.ItemData = item;
									}
								});
								if (index != -1) {
									// this.$router.push({
									// 	name: "cockpit-cockpitTwoPageIndex",
									// 	params: {
									// 		name: labelContent,
									// 		data: this.ItemData
									// 	}
									// });
								}
							});
							// 鼠标划入
							marker.addEventListener("mouseover", async () => {
								// if (item.typeDataVlaue == "1") {
								var label = new BMap.Label(
									`<span style="font-size: 15px;font-family: Microsoft YaHei;font-weight: bold;color: #FFF; line-height: 4px;display: inline-block;transform: skewX(20deg);">${labelContent}(${num})</span>`, {
										offset: new BMap.Size(0, -35)
									}
								);
								label.setStyle({
									textAlign: "center",
									width: "132px",
									height: "26px",
									transform: "skewX(-20deg)",
									background: "rgba(25, 244, 2, .7)",
									borderRadius: "2px",
									border: "2px solid #19F402",
									borderRadius: "5px",
									lineHeight: "26px"
								});
								// }

								marker.setLabel(label);
							});
							// 鼠标划出
							marker.addEventListener("mouseout", function (e) {
								// var label = getLabel();
								// //设置标签内容为空
								// label.setContent("");
								// //设置标签边框宽度为0
								// label.setStyle({
								// 	border: "none",
								// 	width: "0px",
								// 	padding: "0px"
								// });
							});
						});
					}
				</script>
			</div>
			<div class="rightContent" style="right:10px;">
				<div class="breathe">
					<div class="serviceSubItem">
						<div style="color:#fff;font-size: 20px;margin-left: 30px;">接口调用</div>
					</div>
					<div class="seHeader">

					</div>
					<div class="serData">

					</div>
				</div>



				<div class="phoneCall">
					<div class="serviceSubItem">
						<div style="color:#fff;font-size: 20px;margin-left: 30px;">会议记录</div>

						<ul class="table">
							<li class="thead">
								<ul class="tr clearfix">
									<li>会议主题</li>
									<li>创建人</li>
									<li>开始时间</li>
									<li>会议状态</li>
								</ul>
							</li>
							<marquee style=" height: 450px; margin-top: 20px;" scrollamount="2" direction="down"
								Align="Middle" id="marqueeId">
								<!-- <li class="tbody">
									<ul class="tr clearfix">
										<li>崇明一班</li>
										<li>28</li>

										<li>8.3</li>
										<li>12.3%</li>
									</ul>
									<ul class="tr clearfix">
										<li>崇明二班</li>
										<li>56</li>

										<li>12.5</li>
										<li>14%</li>
									</ul>
									<ul class="tr clearfix">
										<li>崇明三班</li>
										<li>89</li>

										<li>20.7</li>
										<li>27.7%</li>
									</ul>
									<ul class="tr clearfix">
										<li>崇明四班</li>
										<li>120</li>

										<li>27.1</li>
										<li>30.0%</li>
									</ul>
									<ul class="tr clearfix">
										<li>崇明五班</li>
										<li>30</li>

										<li>5.0</li>
										<li>8%</li>
									</ul>
								</li> -->
							</marquee>
						</ul>
						<script type="text/javascript">
							// let accessToken = ""
							// getToken()

							// function getToken() {
							// 	let data = {
							// 		appKey: "ding8n0tcqjvc0veclgs",
							// 		appSecret: "dpTt0m4HOtwDcjlkfTgXLTn36HEJfxND0zPaeKYWULxKnfDHkmPLKnOgf28pJkZV"
							// 	}
							// 	$.ajax({
							// 		async: false, // false为同步
							// 		url: "https://login.cmjy.sh.cn/cmeduGateway/cmeduweb00001/v1/getToken?appkey=5eecbdfe8dcb0814749d9edc", // 请求路径
							// 		data: JSON.stringify(data),
							// 		type: "POST", // 请求方式
							// 		contentType: 'application/json;charset=utf-8',
							// 		success: function (res) {
							// 			accessToken = res.accessToken
							// 		},
							// 		error: function (data) {
							// 			alert(data);
							// 		}
							// 	});


							// }

							// getMeetingList()

							// function getMeetingList() {
							// 	$.ajax({
							// 		async: false, // false为同步
							// 		url: "https://login.cmjy.sh.cn/cmeduApi/dingding/v1/dingding_em_230509001/lists?appkey=5eecbdfe8dcb0814749d9edc", // 请求路径
							// 		// data: JSON.stringify(data),
							// 		type: "get", // 请求方式
							// 		contentType: 'application/json;charset=utf-8',
							// 		success: function (res) {
							// 			console.log(res)
							// 			var html = '<li class="tbody">'
							// 			if (res.errcode == 0) {

							// 				for (let index = 0; index < res.rows.length; index++) {
							// 					html += '<ul class="tr clearfix">' +
							// 						'<li>' + res.rows[index].title + '</li>' +
							// 						'<li>' + res.rows[index].creatorNick + '</li>' +

							// 						'<li>' + res.rows[index].create_time + '</li>' +
							// 						'<li>' + res.rows[index].status + '</li>' +
							// 						'</ul>'
							// 				}
							// 				html += "</li>"
							// 				document.getElementById("marqueeId").innerHTML = (html)
							// 			}
							// 		},
							// 		error: function (data) {
							// 			alert(data);
							// 		}
							// 	});
							// }
						</script>

						<style>
							.phoneCall .table .tbody li:nth-child(3) {
								flex: 4.0 !important;
							}
						</style>

					</div>
					<div class="seHeader">

					</div>

				</div>
			</div>

		</div>

	</div>



	<!-- <script src="js/echarts.min.js"></script>
	<script src="js/fq.js"></script> -->
	<script>
		var lazyFun;

		function init(el, width, height) {
			var _el = document.getElementById(el);
			var hScale = window.innerHeight / height;
			var wScale = window.innerWidth / width;
			_el.style.transform = 'scale(' + wScale + ',' + hScale + ')'
		}
		init('mainbody', 1920, 1080);
		window.onresize = function () {
			clearTimeout(lazyFun);
			lazyFun = setTimeout(function () {
				init('mainbody', 1920, 1080)
			}, 600);
		};
	</script>

</body>

</html>
